<template>
  <div class="pageSty">
    <h2>个人中心</h2>
    <div class="flex_str_clo ">
      <div class="asideSty flex_cen_column">
        <img src="@/assets/img/label.png" class="label_icon_sty">
        <img :src="userInfo.headImageUrl" class="user_img_sty" @click="menuCLick(7,'myInfo')">
        <div class="user_name_sty">{{ userInfo.nickName }}</div>
        <div class="flex_cen leverSty">
          <img src="@/assets/img/crown.png" class="lever_img">
          <div class="flex_cen">
            <div style="margin-right:4px;" v-for="(item,index) in userInfo.memberInfos" :key="index" v-if="userInfo.memberInfos">{{ item.memberName }}</div> 
            <div v-else>普通用户</div>
          </div>
        </div>
        <div class="flex_cen leverSty">
          <div class="flex_cen">
            <div class="dTimeSty" v-if="userInfo.hasOwnProperty('memberInfos')">到期时间:{{ userInfo.memberInfos[0].expireTime.substring(0,10) }}</div> 
          </div>
        </div>
        <div class="openVipSty" @click="vipClick">开通VIP</div>
        <div class="menu_tit_sty" ></div>
        <div v-for="(item, index) in menuList" :key="index" @click="menuCLick(item.id, item.com)" class="mentItemSty"
          :style="menuId == item.id ? 'color:#FF8D1C; ' : ''">
          {{ item.name }}</div>
      </div>
      <component :is="components.get(currentComVal)" @goMyUpdate="goMyUpdate"></component>

    </div>
  </div>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue'
import { getUserInfoApi } from '@/api/index/index'
import { useRouter } from 'vue-router';
const router = useRouter()
// 需要加载的组件集合
const components = ref(new Map<string, any>())
components.value.set(
  'uploadHouse',
  defineAsyncComponent(() => import('./components/uploadhouse.vue'))
)
components.value.set(
  'myUpload',
  defineAsyncComponent(() => import('./components/myupload.vue'))
)
components.value.set(
  'myProfit',
  defineAsyncComponent(() => import('./components/myProfit.vue'))
)
components.value.set(
  'myfollow',
  defineAsyncComponent(() => import('./components/myFollow.vue'))
)
components.value.set(
  'myRelease',
  defineAsyncComponent(() => import('./components/myRelease.vue'))
)
components.value.set(
  'myShouCang',
  defineAsyncComponent(() => import('./components/myShouCang.vue'))
)
components.value.set(
  'myMoney',
  defineAsyncComponent(() => import('./components/myMoney.vue'))
)
components.value.set(
  'myInfo',
  defineAsyncComponent(() => import('./components/myInfo.vue'))
)
const currentComVal = ref('uploadHouse')

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const menuList = ref([
  { id: 1, name: '上传作品', com: 'uploadHouse' },
  { id: 2, name: '我的上传', com: 'myUpload' },
  { id: 3, name: '我的收益', com: 'myProfit' },
  { id: 4, name: '我的发布', com: 'myRelease' },
  { id: 5, name: '我的收藏', com: 'myShouCang' },
  { id: 6, name: '我的资产', com: 'myMoney' },
  { id: 7, name: '我的信息', com: 'myInfo' }
])
const userInfo =  ref<any>({})
const menuId = ref(1)
const goUserSetting = () => {
    router.push('/usersetting/index')
}
const menuCLick = (id: number, com: string) => {
  menuId.value = id
  currentComVal.value = com
}
const goMyUpdate = () => {
  menuId.value = 2
  currentComVal.value = 'myUpload'
}
const getUserInfoFun = ()=>{
  getUserInfoApi().then((res: any) => {
        userInfo.value = res.data
    })
}
const vipClick=()=>{
    router.push('/vipList/index')
}
getUserInfoFun()
</script>
<style scoped>
.dTimeSty{
  font-size: 20px;
  margin-top: 10px;
}
.mentItemSty {
  font-size: 20px;
  margin: 9px 0;
}

.menu_tit_sty {
  width: 100%;
  height: 60px;
  text-align: center;
  line-height: 60px;
  background-color: #F8F7F0;
}

.openVipSty {
  width: 85%;
  border: 3px solid #EB6063;
  color: #EB6063;
  text-align: center;
  border-radius: 6px;
  font-size: 18px;
  padding: 4px 0;
  margin: 14px 0;
}

.leverSty {
  color: #ccc;
}

.user_name_sty {
  font-weight: 700;
  margin: 10px 0;
}

.lever_img {
  width: 32px;
  margin-right: 12px;
}

.user_img_sty {
  height: 68px;
  border-radius: 34px;
  margin-top: 20px;
}

.pageSty {
  width: 80%;
  margin-left: 10%;
}

.asideSty {
  position: relative;
  width: 18%;
  min-height: 500px;
  background-color: #fff;
}

.label_icon_sty {
  position: absolute;
  top: 0;
  right: 30px;
  width: 38px;
  height: 50px;
}
</style>